<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <!-- v-for 遍历数组和对象 -->
    <div class="box">
        <!-- v-for遍历数组时 item：  数组的每一项  index： 下标
            in 或者用 of
        :key是唯一的值  （唯一不能重复）    
        -->
        <ul>
            <li v-for="(item,index) of arr" :key="index">
                {{index}} --- {{item}}
            </li>
        </ul>
        <!-- v-for遍历对象 value：对象的value值 key:对象的key  index：下标 -->
        <ul>
            <li v-for="(value,key,index) in obj" :key="index">
                {{index}}--{{key}}--{{value}}
            </li>
        </ul>
        <!-- 数组套对象 -->
        <ul>
            <li v-for="(item,index) in arrObj" :key="item.id">
                {{index}}--{{item.name}}--{{item.msg}}
            </li>
        </ul>
        <!-- :key是一个唯一的标识 

            :key 使用index  可以吗？  可以

            :key使用index合适还是使用id合适？ 使用id合适  

            v-if和v-for可以一起使用吗？ 可以但是不建议
            v-for的优先级比v-if高
        -->
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                arr:['mingming','qiqi','sengseng','mingming'],
                obj:{
                    name:'祺祺国王',
                    msg:'祺祺国王很抢手！！'
                },
                arrObj:[
                    {id:3,name:'hanhan',msg:'我想回宿舍'},
                    {id:1,name:'mingming',msg:'能理解不！！'},
                    {id:2,name:"qiqi",msg:'haha'}
                ]
            }
        })
    </script>
</body>
</html>